<!--UserList-->
<template>
  <div class="adjustment-body">
    <div class="fb-title">
      <i class="el-icon-s-promotion"></i>
      <span>客户信息</span>
    </div>
    <div style="margin:0 auto; width: 80%">
      <el-table
        :data="data.slice((pagination.currentPage-1) * pagination.pagesize, pagination.currentPage
    * pagination.pagesize)" style="width: 96%; margin: 0 auto; border-radius: 10px"
        height="450px"
      >
        <el-table-column
          prop="userId"
          label="客户ID"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="客户名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="transactionAddress"
          label="地址"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="200"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button v-on:click="show_detail(scope.$index)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; position: relative; right: 5%;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next, jumper"
          :current-page="pagination.currentPage"
          :page-size="pagination.pagesize"
          :total="data.length">
        </el-pagination>
      </div>
      <!--  弹窗-->
      <el-dialog
        title="购买记录"
        :visible.sync="dialogFormVisibleLook"
        :destroy-on-close="true"
        :append-to-body="true"
      >
        <el-table
          v-if="historyBuy != null"
          :data="historyBuy.slice((pagination_detail.currentPage-1) * pagination_detail.pagesize, pagination_detail.currentPage
          * pagination_detail.pagesize)" style="width: 96%; margin: 0 auto; border-radius: 10px"
          height="510px"
        >
          <el-table-column
            label="商品图"
            width="250"
          >
            <template slot-scope="scope">
              <el-image
                :src="scope.row.orderMediaPath[0]"
                style="width: 80px; height: 80px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodName"
            label="商品名称"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="商品价格"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="amount"
            label="购买数量"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="transactionAddress"
            label="地址"
            width="200"
          ></el-table-column>
          <div style="float: right; position: relative; right: 5%;">
            <el-pagination
              background
              @size-change="handleSizeChange_detail"
              @current-change="handleCurrentChange_detail"
              layout="prev, pager, next, jumper"
              :current-page="pagination_detail.currentPage"
              :page-size="pagination_detail.pagesize"
              :total="historyBuy.length">
            </el-pagination>
          </div>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "customBuy",
  model: {
    prop: ['data']
  },
  props: ['data'],
  data() {
    return {
      dialogFormVisibleLook: false,
      formLabelWidth: '80px',
      styleClass: {
        freeze: {
          "background-color": "#4CAF50"
        },
        unfreeze: {
          "background-color": "red"
        }
      },
      pagination: {
        currentPage: 1,
        pagesize: 7,
        list: []
      },
      pagination_detail: {
        currentPage: 1,
        pagesize: 4,
        list: []
      },
      flag: true,
      cIndex: 999999,
      historyBuy: null
    }
  },
  methods: {
    show_detail(val) {
      this.dialogFormVisibleLook = true;
      this.$api.user.getOrderByuser_idY({userId: this.data[val].userId}).then(res => {
        console.log(res)
        this.historyBuy = res.data.data;
      })
    },
    handleSizeChange_detail(val) {
      this.pagination_detail.pagesize = val;
    },
    handleCurrentChange_detail(val) {
      this.pagination_detail.currentPage = val;
    },
    // handList_detail: function () {
    //   this.pagination_detail.list = this.historyBuy;
    // },
    handleSizeChange(val) {
      this.pagination.pagesize = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    // handList: function () {
    //   this.pagination.list = this.data;
    // }
  },
  created() {
    // alert(this.data.slice((this.pagination.currentPage-1)*this.pagination.pagesize,this.pagination.currentPage*this.pagination.pagesize))
    // this.handList()
  }
}
</script>

<style lang="scss" scoped>
.adjustment-body {
  margin-top: -70px;
}
table.title {
  position: fixed;
  width: 98%;
  height: 10%;
  margin: 0 auto;
  top: 0;
  background-color: #037bd2;
}

button.title_button {
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
}

td {
  border-style: none;
  font-family: "Microsoft YaHei", serif;
}

span {
  text-align: center;
}

img {
  border-radius: 20px;
  width: 100px;
  height: 100px;
}

#imglist img {
  float: left;
}

.left:hover {
  background-color: slategrey;
}

a.astyle {
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor: pointer
}

.astyle:hover {
  color: lightgray;
}

input.dj {
  width: 40%;
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}

.dj:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
  border: none;
}

.but1 {
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}

.but1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
}

td {
  margin: 0 auto;
  margin-top: 5%;
}

.table {
  margin: 0 auto;
  border: 2px solid steelblue;
  text-align: center;
  width: 1000px;
  /*height: 600px;*/
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px 10px 0 0;
  line-height: 50px;
}

.tr1 {
  background: steelblue;
  border-radius: 10px;
  border: 2px solid steelblue;
  color: white;
  font-family: "Microsoft Himalaya", sans-serif;
  text-align: center;
}

.tr2 {
  background: white;
  font-family: "Microsoft Himalaya", sans-serif;
  color: #4F4F4F;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0);
}

.tr2:hover {
  background: rgba(220, 220, 220, 1);
}
.fb-title {
  font-weight: bold;
  font-size: 36px;
  height: 60px;
  color: rgba(28, 28, 28, 0.6);
  padding-left: 30px;
  padding-top: 30px;
  border-radius: 25px 25px 0 0;
}
>>> .el-button:hover {
  color: rgba(176, 224, 230, 1);
}
>>> .el-dialog {
  width: 1500px;
  border-radius: 25px;
}
>>> .el-dialog__header {
  padding: 10px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
</style>
